<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="resources/css/ui-lightness/jquery-ui-1.8.14.custom.css">
<title>tree view demo</title>
<style>
		body { font-size: 62.5%; }
		label, input { display:block; }
		input.text { margin-bottom:12px; width:95%; padding: .4em; }
		fieldset { padding:0; border:0; margin-top:25px; }
		h1 { font-size: 1.2em; margin: .6em 0; }
		.ui-dialog .ui-state-error { padding: .3em; }
		.validateTips { border: 1px solid transparent; padding: 0.3em; }
		.description{width: 315px; height: 90px;}
	</style>
</head>
<body>
	<div id="demo1"
		class="demo jstree jstree-0 jstree-default jstree-focused"
		style="height: 198px;">
		<ul>
			<li id="type0" class="jstree-open"><ins class="jstree-icon">&nbsp;</ins><a
				href="#"><ins class="jstree-icon">&nbsp;</ins>类型</a>
		    <ul>
			<c:forEach var="mainCategory" items="${categories}">
				<li id="type${mainCategory.categoryCode}" class="jstree-open"><ins class="jstree-icon">&nbsp;</ins>
				<a href="#" title="${mainCategory.description }"><ins class="jstree-icon">&nbsp;</ins>${mainCategory.name}</a>
				
				<c:if test="${mainCategory.childCategories != null}">
					<ul style="">
						<c:forEach var="childCategory" items="${mainCategory.childCategories }" >
						<li id="type${childCategory.categoryCode }" class="jstree-leaf"><ins class="jstree-icon">&nbsp;</ins><a
						href="#"  title="${mainCategory.description }"><ins class="jstree-icon">&nbsp;</ins> ${childCategory.name} </a>
					  	
					    </li>
						</c:forEach>
					</ul>
				</c:if>
			  </li>	
			
			</c:forEach>
		
			</ul>
		</li><!--  type root -->
		</ul>
	</div>

<div id="dialog-form" title="添加或编辑类型">
	<p class="validateTips"></p>
	<form>
	<fieldset>
	    <input type="hidden" id="flag" name="flag"/>
	    <input type="hidden" id="parentId" name="parentId"/>
	    <input type="hidden" id="typeId" name="typeId"/>
		<label for="name">类型名称:</label>
		<input type="text" name="name" id="name" class="text ui-widget-content ui-corner-all" />
		<label for="description">类型描述:</label>
		<textarea  name="description" id="description" class="text ui-widget-content ui-corner-all" ></textarea>
	</fieldset>
	</form>
</div>

<div id="dialog-remove" title="确认删除类型???">
 <form>
	<fieldset>
	    <input type="hidden" id="rtypeId" name="rtypeId"/>
		<label for="rname">类型名称:</label>
		<p  id="rname" class="ui-widget-content ui-corner-all" ></p>
		<label for="rdescription">类型描述:</label>
		<p  id="rdescription" class=" ui-widget-content ui-corner-all" ></p>
	</fieldset>
</form>
</div>

	<!-- Include the required JavaScript libraries: -->
 <script src='resources/jquery/jquery-1.5.1.min.js' type="text/javascript"></script>
<script src='resources/jstree/jquery.jstree.js' type="text/javascript"></script>
 <script src='resources/jquery/jquery-ui-1.8.14.custom.min.js' type="text/javascript"></script>

    <!-- Add code to initialize the tree when the document is loaded: -->
    <script type="text/javascript">
    $(function(){
		$("#demo1").jstree({
			"plugins":["themes","json_data","contextmenu","crrm","ui"],
			 "json_data":{
				 "ajax":{
					 "type":"GET",
					 "url":"/category/ajax.do"
					 
				 }
			 },
			 "contextmenu":{ //配置右键菜单 
				 items:{
				 "rename":{ // 重命名菜单 配置 
					 "label":"编辑选中类型",
					 "action":function(obj){
						  var typeId = obj.attr('id');
						  var id = typeId.match(/\d+/);
						  var   a =  obj.children('a');
						  var nameStr = a.text();
						  var descStr = a.attr('title');
						  
						  $("#typeId").val(id);
						  $("#flag").val("edit");
						  $("#name").val(nameStr);
						  $("#description").val(descStr);
						 $("#dialog-form" ).dialog( "open" );
					 }
				  },
		          "create":{
		        	"label":"添加子类型!",
		            "action":function(obj){
		            	var typeId = obj.attr('id');
		            	var parentId = typeId.match(/\d+/);
		            	$("typeId").val(parentId);// no need 
		            	$("#parentId").val(parentId);
		            	$("#flag").val("create");
		            	$("#dialog-form" ).dialog( "open" );
		            	
		            }
		          },
		          "remove":{
		        	  "label":"删除选中类型",
		        	  "action":function(obj){
		        		  var typeId = obj.attr('id');
						  var id = typeId.match(/\d+/);
						  var   a =  obj.children('a');
						  var nameStr = a.text();
						  var descStr = a.attr('title');
						  
						  $("#rtypeId").val(id);
						  $("#rname").text(nameStr);
						  $("#rdescription").text(descStr);
		        		  $("#dialog-remove" ).dialog( "open" );
		        	  }
		          }
				 }//end config items 
				 
			 }//end config contextmenu 
		});
    });
    </script>
    
    <script>
	$(function() {
		// a workaround for a flaw in the demo system (http://dev.jqueryui.com/ticket/4375), ignore!
	//	$( "#dialog:ui-dialog" ).dialog( "destroy" );
		

			var tips = $( ".validateTips" );
			var name = $("#name"),
		    description = $("#description"),
			allFields = $( [] ).add( name ).add(description);

		function updateTips( t ) {
			tips
				.text( t )
				.addClass( "ui-state-highlight" );
			setTimeout(function() {
				tips.removeClass( "ui-state-highlight", 1500 );
			}, 500 );
		}

		function checkLength( o, n, min, max ) {
			if ( o.val().length > max || o.val().length < min ) {
				o.addClass( "ui-state-error" );
				updateTips(   n + "的字数要求为 " +
					min + " 到" + max + "个字." );
				return false;
			} else {
				return true;
			}
		}

		function checkRegexp( o, regexp, n ) {
			if ( !( regexp.test( o.val() ) ) ) {
				o.addClass( "ui-state-error" );
				updateTips( n );
				return false;
			} else {
				return true;
			}
		}
		
		$( "#dialog-form" ).dialog({
			autoOpen: false,
			height: 300,
			width: 350,
			modal: true,
			buttons: {
				"确定修改": function() {
					var bValid = true;
					var name = $("#name"),
				    description = $("#description"),
					allFields = $( [] ).add( name ).add(description);
					allFields.removeClass( "ui-state-error" );

					bValid = bValid && checkLength(name, "类型名称", 3, 16 );
					bValid = bValid && checkLength(description,"类型描述",10,255);
					//bValid = bValid && checkRegexp( name, /^[a-z]([0-9a-z_])+$/i, "Username may consist of a-z, 0-9, underscores, begin with a letter." );
					if ( bValid ) {
						//  TODO 处理数据交互  
						var typeId = $("#typeId").val();
						var flag = $("#flag").val();// operation flag
						var parentId = $("#parentId").val();
						var name = $("#name").val();
						var desc = $("#description").val();
						var dataJson = {flag:flag,id:typeId,name:name,desc:desc,parentId:parentId};
						var dataUriEncode = $.param(dataJson);
						$.ajax({type:"POST",url:"/treeview.do",data:dataUriEncode,dataType:"text",
							 success:function(msg){
							     alert(""+msg);
						      } 
						});
						
						$( this ).dialog( "close" );
					}
				},
				"取消": function() {
					$( this ).dialog( "close" );
				}
			},
			close: function() {
				allFields.val( "" ).removeClass( "ui-state-error" );
			}
		});


		
		$( "#dialog-remove" ).dialog({
			autoOpen: false,
			height: 300,
			width: 350,
			modal: true,
			buttons: {
				"确定删除": function() {
						//  TODO 处理数据交互
						var typeId = $("#rtypeId").val();
						$.ajax({type:"POST",url:"/treeview.do",data:"flag=remove&id="+typeId,dataType:"text",success:function(msg){
							alert(""+msg);
						   } 
						});
						$( this ).dialog( "close" );
				},
				"取消": function() {
					$( this ).dialog( "close" );
				}
			},
			close: function() {
				allFields.val( "" ).removeClass( "ui-state-error" );
			}
		});

	});
	</script>
</body>
</html>